<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--需求1:自定义指令v-big,和v-text功能类似,但是会把绑定的数值扩大10倍-->
<!--需求2:自定义指令v-fbind,和v-bind功能类似,但可以让与其绑定的input元素默认获取焦点-->





<div id="root">
  name值:<h1>{{name}}</h1>
  a的值:<h1 v-text="a"></h1>
  a十倍大的值:<h1 v-big="a"></h1>
  <button @click="a++">点击a+1</button>

  <hr/>
  <input type="text" v-fbind="a">

  <hr/>
  <!--自定义指令有多个单词时,用-隔开-->
  <input type="text" v-big-number="a">
  <input type="text" v-big-number2="a">
  <input type="text" v-big-number3="a">
  <input type="text" v-big-number4="a">

</div>

<script type="text/javascript">
  //全局自定义指令
  //指令声明时不带v-,使用时必须带v-
  Vue.directive('big-number3',{
    bind(element,binding){
      //指令与三俗绑定时执行
      element.value=binding.value;
    },
    inserted(element,binding){
      //元素插入页面后执行
      //element.focus();
    },
    update(element,binding){
      //模板被重新刷新时执行
      element.value=binding.value;
    }
  })

  Vue.directive('big-number4',function (element,binding){
    element.value=binding.value;
  })
  var vm = new Vue({
    el:'#root',
    data:{
      a:1,
      name:'自定义指令'
    },
    directives:{
      big(element,binding){
        /*
        * 自定义指令函数什么时候被调用:
        *   1.指令与元素成功绑定时(一上来)
        *   2.指令所在的模板被重新解析时
        * */
        console.log('big被调用');
        element.innerHTML=binding.value * 10;
      },
      /*fbind(element,binding){
        //注意,直接这样写,初次打开页面时,聚焦方法不会体现再页面上,因为初次打开页面时,vue进行元素与指令的绑定,时虚拟dom与指令的绑定
        // 此时执行一次函数,此时页面编译时,元素还没出现再页面上,只有元素已经出现在页面上时买才可以获得焦点,原生js也是如此
        // 聚焦只存在于内存中,当点击按钮时,模板重新加载,又会再次执行该函数,此时传进来的时真实dom,所以此时需要用另外一种写法
        element.value=binding.value;
        element.focus();
      }*/
      fbind:{
        bind(element,binding){
          //指令与三俗绑定时执行
          element.value=binding.value;
        },
        inserted(element,binding){
          //元素插入页面后执行
          element.focus();
        },
        update(element,binding){
          //模板被重新刷新时执行
          element.value=binding.value;
          element.focus();
        }
      },
      /*带有-的key,必须带引号*/
      'big-number':{
        bind(element,binding){
          //指令与三俗绑定时执行
          element.value=binding.value;
        },
        inserted(element,binding){
          //元素插入页面后执行
          //element.focus();
        },
        update(element,binding){
          //模板被重新刷新时执行
          element.value=binding.value;
        }
      },
      'big-number2'(element,binding){
        element.value=binding.value;
      }
    }
  });
</script>
</body>
</html>
